import  { useState } from 'react'
import { NavBar, Card, Space, Tabs } from 'antd-mobile'
import { MoreOutline, UserOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import './zhu3.css'

function Index() {
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState('examination')

  const handleBack = () => {
    navigate(-1)
  }

  const handleSwitchPatient = () => {
    console.log('切换患者')
  }

  // 检查报告数据
  const examinationReports = [
    {
      id: 1,
      title: '双肾及肾血管彩色多普勒',
      reportTime: '2020-01-01 10:20:36',
      status: 'issued',
      statusText: '报告已出'
    },
    {
      id: 2,
      title: '上腹部CT平扫',
      reportTime: '2020-01-01 10:20:36',
      status: 'issued',
      statusText: '报告已出'
    },
    {
      id: 3,
      title: '核磁共振',
      reportTime: '--',
      status: 'pending',
      statusText: '报告未出'
    }
  ]

  // 检验报告数据
  const testReports = [
    {
      id: 1,
      title: '血常规检查',
      reportTime: '2020-01-01 09:15:20',
      status: 'issued',
      statusText: '报告已出'
    },
    {
      id: 2,
      title: '肝功能检查',
      reportTime: '--',
      status: 'pending',
      statusText: '报告未出'
    }
  ]

  const handleReportClick = (report: any) => {
    console.log('查看报告:', report)
    // 可以跳转到报告详情页面
  }

  const renderReportList = (reports: any[]) => {
    return (
      <div className="report-list">
        {reports.map((report) => (
          <Card 
            key={report.id} 
            className="report-item"
            onClick={() => handleReportClick(report)}
          >
            <div className="report-content">
              <div className="report-title">{report.title}</div>
              <div className="report-time">报告时间: {report.reportTime}</div>
            </div>
            <div className={`report-status ${report.status}`}>
              {report.statusText}
            </div>
          </Card>
        ))}
      </div>
    )
  }

  return (
    <div className="zhu3-container">
      {/* 顶部导航栏 */}
      <NavBar
        onBack={handleBack}
        right={
          <Space>
            <MoreOutline fontSize={20} />
            <div className="nav-icon">◎</div>
          </Space>
        }
        className="zhu3-navbar"
      >
        住院报告
      </NavBar>

      {/* 患者信息区域 */}
      <div className="patient-info">
        <div className="patient-basic">
          <span className="patient-name" onClick={()=>navigate('/zhu4')}>王小柯</span>
          <span className="patient-id">2015****10</span>
        </div>
        <div className="switch-patient" onClick={handleSwitchPatient}>
          <UserOutline fontSize={16} />
          <span>切换</span>
        </div>
      </div>

      {/* 报告类型标签页 */}
      <div className="tabs-container">
        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          className="report-tabs"
        >
          <Tabs.Tab title="检查" key="examination">
            {renderReportList(examinationReports)}
          </Tabs.Tab>
          <Tabs.Tab title="检验" key="test">
            {renderReportList(testReports)}
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  )
}

export default Index